<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" data-table-id="TaskChapter">
    <div class="layui-card-body padding-left-40">

        <div class="layui-row layui-col-space10">

            <div class="layui-col-md12">
                <label class="layui-form-label">{:Lang("章节名称")}:</label>
                <div class="layui-input-block">
                    <input name="title"   class="layui-input"  placeholder="{:lang('章节名称')}" value='{$vo.title|default=""}'>
                </div>
            </div>
            <div class="layui-col-md12">
                <label class="layui-form-label">{:Lang("简介")}:</label>
                <div class="layui-input-block">
                
                    <textarea name="details" placeholder="请输入内容" class="layui-textarea"> {$vo.details|default=""}</textarea>
                </div>
            </div>

            {if ($vo.pid <> 0)}
            <div class="layui-col-md12">
                <label class="layui-form-label">{:Lang("类型")}:</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" title="资料" {if $vo.type == 1} checked {/if}>
                    <input type="radio" name="type" value="2" title="视频" {if $vo.type == 2} checked {/if}>
                    <input type="radio" name="type" value="3" title="实战" {if $vo.type == 3} checked {/if}>
                </div>
            </div>
            <div class="layui-form-item study" {if $vo.type == 3} style="display: none" {/if}>
                <label class="layui-form-label label-required-next">{:Lang("学习时长")}:</label>
                <div class="layui-input-inline">
                    <input name="duration"  type="number"  class="layui-input" placeholder="{:lang('学习时长(分钟)')}" value='{$vo.duration|default=""}'>
                </div>
                <div class="layui-form-mid layui-text-em">分钟</div>
            </div>

            <div class="layui-form-item study" {if $vo.type == 3} style="display: none" {/if}>
                <label class="layui-form-label label-required-next">{:Lang("学习分数")}:</label>
                <div class="layui-input-inline">
                    <input name="score" type="number"  class="layui-input" placeholder="{:lang('学习分数')}" value='{$vo.score|default=""}'>
                </div>
                <div class="layui-form-mid layui-text-em">分</div>
            </div>
            <div class="layui-form-item upload-flag"   {if $vo.type == 3} style="display: none" {/if}>
                <label class="layui-form-label label-required "></label>
                <div class="layui-input-block">
                    <div style="display: flex;">
                        <a id="upload_button" class="layui-btn layui-bg-blue">上传文件</a>
                        <input type="text" name="content"  readonly class="layui-input" value="{$vo.content|default=''}">
                        <input type="file" style="display: none;" name="file_upload" id="file_upload" >
                    </div>

                </div>
                <input  type="hidden" name="pid" value='{$vo.pid|default=""}' class="layui-input ">
                <div class="layui-input-block progress layui-hide">
                    <div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo-filter-progress">
                        <div class="layui-progress-bar" lay-percent="0%"></div>
                    </div>
                </div>
            </div>


            <div class="layui-col-md12 shizhan" {if $vo.type != 3} style="display: none" {/if} >
                <label class="layui-form-label"> </label>
                <div style="display: flex;">
                    <a  data-modal='{:url("getEmployList")}?task_info_id='  class="layui-btn layui-bg-blue employ-submit" >绑定实战项目</a>
                    <input type="text" name="employ_name"  readonly class="layui-input" value="{$vo.employ_name|default=''}">
                    <a   class="layui-btn  layui-btn-danger employ-delete" style="display: none">删除绑定</a>
                    <input  name="employ_id"  type="hidden" class="layui-input" value="{$vo.employ_id|default=''}">
                </div>
            </div>
            {/if}
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>
<script>
    function uploadFile(file, chunkSize = 1024 * 1024) {
        let fileSize = file.size;
        let chunkCount = Math.ceil(fileSize / chunkSize);

        let offset = 0;
        let indexCount = 1;
        function uploadNextChunk(res) {
            if (offset >= fileSize) {

                $('input[name=content]').val(res.data);
                $('.progress').css('display', 'none');

                return;
            }
            $('.progress').css('display', 'block');
            let chunk = file.slice(offset, offset + chunkSize);
            let formData = new FormData();
            formData.append('file', chunk);
            formData.append('fileName', file.name);
            formData.append('chunkIndex', offset);
            formData.append('chunkCount', chunkCount);
            formData.append('indexCount', indexCount);


            fetch("{:sysuri('upload')}", {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    return response.json(); // 转换为JSON
                }
            }).then(data => {

                offset += chunk.size;
                indexCount ++;
                let num =  Math.round(indexCount/chunkCount * 100);
                if (num > 100) num = 100;
                layui.element.progress('demo-filter-progress',  num.toFixed(2)+'%'); // 设置 50% 的进度
                uploadNextChunk(data);
            })
        }

        uploadNextChunk();
    }



    // 绑定点击事件处理器
    $("#upload_button").click(function() {

        $("#file_upload").trigger("click");
        // 使用示例
    });

    $("#file_upload").change(function () {
        const file = document.getElementById('file_upload').files[0];
        uploadFile(file, 1024 * 10);
    })


    // 绑定实战
    function buildEmploy(title, id) {
        $('input[name=employ_id]').val(id);
        $('input[name=employ_name]').val(title);
        $('.employ-delete').css('display', 'block');
        layui.layer.closeLast('page');
    }
    // 删除绑定实战
    $('.employ-delete').click(function () {
        $('input[name=employ_id]').val(0);
        $('input[name=employ_name]').val('');
        $('.employ-delete').css('display', 'none');
    });


    // 指向所有 select 组件的选择事件
    layui.form.on('radio', function(data){

        if (data.value == 3) {
            $('.shizhan').css('display', 'block')
            $('.upload-flag').css('display', 'none')
            $('input[name=content]').val('');
            $('.study').hide().find('input').val('');
        } else {
            $('.shizhan').css('display', 'none');
            $('.upload-flag').css('display', 'block')
            $('input[name=employ_id]').val(0);
            $('.study').show();
        }
    });
</script>
